estoy haciendo un e-commerce con React y me sale un error digamos

No se pueden leer las propiedades de undefined (leyendo 'mapa')

Lo cual no tiene sentido porque he hecho lo mismo en otro componente y funciona bien.

Aquí está mi código a continuación con el comentario sobre la función de mapa que no funciona. Déjame si algo no está claro. Revisé los errores de sintaxis y todo funciona bien.

 export class CartItem extends Component { constructor(props) { super(props); this.state={ product: {}, failedToLoad: false } } async componentWillMount(){ let data = await this.getProduct(this.props.product.itemId); // let product = data.data.product; // this.setState({product: product}); if (data.data.product) { this.setState({product: data.data.product}); } else { this.setState({failedToLoad: true}); } } async getProduct(id){ return await fetchTheQuery( `query getProduct($id: String!){ product(id: $id){ name prices{ currency amount } } }`, {id: id} ) } render() { const {addProduct, productsToPurchase} = this.props.cartContext const {selectedCurrency} = this.props.currencyContext console.log(this.state.product.prices) let productFetched = this.state.product if (this.state.failedToLoad){ return (<div>Something went wrong</div>) } else if (productFetched){ return( <div> <h2> {this.state.product.name} </h2> <h5> {/*There is an error here*/} { this.state.product.prices.map( price =>{ if (price.currency == selectedCurrency){ return( <> { getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }</> ) } } )} </h5> <button onClick={() => { addProduct(this.props.product.itemId, this.state.product.prices) }}> Add </button> <h4>{productsToPurchase[this.props.itemIndex].qty}</h4> <hr/> </div> ) } else { return <p>Loading............</p> } } }